<template>
  <div class="map-page">
    <div id="map" class="map-container"></div>
    
    <!-- 左侧代码示例面板 -->
    <div class="code-panel">
      <div class="code-header">
        <h3>代码示例</h3>
        <div class="header-actions">
          <span class="entity-name">{{ getEntityDisplayName(selectedEntity) }}</span>
          <button class="copy-btn" @click="copyCode" title="复制代码">
            <i class="fas fa-copy"></i>
          </button>
          <div v-if="showCopySuccess" class="copy-success">
            <i class="fas fa-check"></i> 已复制
          </div>
        </div>
      </div>
      <div class="code-content">
        <pre><code>{{ getCodeExample(selectedEntity) }}</code></pre>
      </div>
    </div>
    
    <div class="control-panel">
      <el-radio-group v-model="selectedEntity" @change="handleEntityChange">
        <el-radio label="point">Point 实体</el-radio>
        <el-radio label="line">Line 实体</el-radio>
        <el-radio label="polygon">Polygon 实体</el-radio>
        <el-radio label="rectangle">Rectangle 实体</el-radio>
        <el-radio label="label">Label 实体</el-radio>
        <el-radio label="billboard">BillboardEntity 实体</el-radio>
        <el-radio label="composite">CompositeBillboardLineLabel 实体</el-radio>
        <el-radio label="straightArrow">StraightArrow 实体</el-radio>
        <el-radio label="attackArrow">AttackArrow 实体</el-radio>
        <el-radio label="doubleArrow">DoubleArrow 实体</el-radio>
        <el-radio label="swallowtailArrow">SwallowtailArrow 实体</el-radio>
        <el-radio label="gatheringPlace">GatheringPlace 实体</el-radio>
      </el-radio-group>
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
import Map from '289-map'

const entities = reactive([])
const selectedEntity = ref('point')
const showCopySuccess = ref(false)
let map

// 为每种实体单独定义坐标点
const entityPoints = {
  // 1个点的实体
  point: [116.20, 39.60],
  label: [116.25, 39.80],
  billboard: [116.30, 39.70],
  
  // 2个点的实体
  rectangle: [
    [116.40, 39.40], // 左下角
    [116.60, 39.60]  // 右上角
  ],
  straightArrow: [
    [116.20, 39.80], // 起点
    [116.40, 39.90]  // 终点
  ],
  swallowtailArrow: [
    [116.50, 39.70], // 起点
    [116.70, 39.80]  // 终点
  ],
  composite: {
    start: [116.35, 39.65], // 起点
    end: [116.55, 39.75]    // 终点
  },
  
  // 3个点的实体
  gatheringPlace: [
    [116.40, 39.50], // 点1
    [116.50, 39.60], // 点2
    [116.45, 39.70]  // 点3
  ],
  
  // 4个点的实体
  doubleArrow: [
    [116.60, 39.80], // 点1
    [116.70, 39.90], // 点2
    [116.65, 40.00], // 点3
    [116.75, 40.10]  // 点4
  ],
  
  // n个点的实体
  line: [
    [116.20, 40.00], // 线起点
    [116.30, 40.10], // 线中点
    [116.40, 40.20]  // 线终点
  ],
  polygon: [
    [116.50, 40.00], // 多边形顶点1
    [116.60, 40.10], // 多边形顶点2
    [116.55, 40.20], // 多边形顶点3
    [116.45, 40.15]  // 多边形顶点4
  ],
  attackArrow: [
    [116.70, 39.90], // 攻击箭头点1
    [116.80, 40.00], // 攻击箭头点2
    [116.75, 40.10], // 攻击箭头点3
    [116.85, 40.20]  // 攻击箭头点4
  ],
}

// 实体映射表
const entityMap = {
  point: 0,
  line: 1,
  polygon: 2,
  rectangle: 3,
  label: 4,
  billboard: 5,
  composite: 6,
  straightArrow: 7,
  attackArrow: 8,
  doubleArrow: 9,
  swallowtailArrow: 10,
  gatheringPlace: 11
}

// 实体显示名称映射
const entityDisplayNames = {
  point: 'Point 点实体',
  line: 'Line 线实体',
  polygon: 'Polygon 多边形实体',
  rectangle: 'Rectangle 矩形实体',
  label: 'Label 标签实体',
  billboard: 'BillboardEntity 广告牌实体',
  composite: 'CompositeBillboardLineLabel 组合实体',
  straightArrow: 'StraightArrow 直线箭头',
  attackArrow: 'AttackArrow 攻击箭头',
  doubleArrow: 'DoubleArrow 双箭头',
  swallowtailArrow: 'SwallowtailArrow 燕尾箭头',
  gatheringPlace: 'GatheringPlace 聚集地'
}

// 代码示例映射
const codeExamples = {
  point: `// Point 实体 - 需要1个点
const point = new Map.Graphic.Point({
  position: [116.20, 39.60],
  style: { 
    color: '#3388ff', 
    width: 20 
  },
  popup: 'Point 实体 - 需要1个点'
})
map.addGraphic(point)`,

  line: `// Line 实体 - 需要n个点
const line = new Map.Graphic.Line({
  position: [
    [116.20, 40.00], // 线起点
    [116.30, 40.10], // 线中点
    [116.40, 40.20]  // 线终点
  ],
  style: { 
    color: '#ff6600', 
    width: 4 
  },
  popup: 'Line 实体 - 需要n个点'
})
map.addGraphic(line)`,

  polygon: `// Polygon 实体 - 需要n个点
const polygon = new Map.Graphic.Polygon({
  position: [
    [116.50, 40.00], // 多边形顶点1
    [116.60, 40.10], // 多边形顶点2
    [116.55, 40.20], // 多边形顶点3
    [116.45, 40.15]  // 多边形顶点4
  ],
  style: { 
    color: '#00cc88', 
    opacity: 0.5 
  },
  popup: 'Polygon 实体 - 需要n个点'
})
map.addGraphic(polygon)`,

  rectangle: `// Rectangle 实体 - 需要2个点（对角点）
const rectangle = new Map.Graphic.Rectangle({
  position: [
    [116.40, 39.40], // 左下角
    [116.60, 39.60]  // 右上角
  ],
  style: { 
    color: '#ff8800', 
    borderColor: '#000', 
    borderWidth: 2 
  },
  popup: 'Rectangle 实体 - 需要2个点'
})
map.addGraphic(rectangle)`,

  label: `// Label 实体 - 需要1个点
const label = new Map.Graphic.Label({
  position: [116.25, 39.80],
  style: { 
    text: 'Label', 
    color: '#333', 
    font_size: 18 
  },
  popup: 'Label 实体 - 需要1个点'
})
map.addGraphic(label)`,

  billboard: `// BillboardEntity 实体 - 需要1个点
const billboard = new Map.Graphic.BillboardEntity({
  position: [116.30, 39.70],
  style: {
    image: await import('@/assets/images.jpg'),
    width: 48,
    height: 48,
    label: { 
      text: 'Billboard', 
      color: 'blue', 
      font_size: 14, 
      pixelOffsetY: 30 
    }
  },
  popup: 'BillboardEntity 实体 - 需要1个点'
})
map.addGraphic(billboard)`,

  composite: `// CompositeBillboardLineLabel 实体 - 需要start和end两个点
const composite = new Map.Graphic.CompositeBillboardLineLabel({
  start: [116.35, 39.65], // 起点
  end: [116.55, 39.75],   // 终点
  billboard: { 
    style: { 
      image: await import('@/assets/images.jpg'), 
      width: 32, 
      height: 32 
    } 
  },
  label: { 
    style: { 
      text: '组合', 
      color: '#f00', 
      font_size: 12 
    } 
  },
  line: { 
    style: { 
      color: '#0ff', 
      width: 2 
    } 
  },
  popup: 'CompositeBillboardLineLabel 实体'
})
map.addGraphic(composite)`,

  straightArrow: `// StraightArrow 实体 - 需要2个点（起点和终点）
const straightArrow = new Map.Graphic.StraightArrow({
  position: [
    [116.20, 39.80], // 起点
    [116.40, 39.90]  // 终点
  ],
  style: { 
    color: '#1e90ff', 
    width: 8 
  },
  popup: 'StraightArrow 实体 - 需要2个点'
})
map.addGraphic(straightArrow)`,

  attackArrow: `// AttackArrow 实体 - 需要n个点
const attackArrow = new Map.Graphic.AttackArrow({
  position: [
    [116.70, 39.90], // 攻击箭头点1
    [116.80, 40.00], // 攻击箭头点2
    [116.75, 40.10], // 攻击箭头点3
    [116.85, 40.20]  // 攻击箭头点4
  ],
  style: { 
    color: '#ff0000', 
    width: 10 
  },
  popup: 'AttackArrow 实体 - 需要n个点'
})
map.addGraphic(attackArrow)`,

  doubleArrow: `// DoubleArrow 实体 - 需要4个点
const doubleArrow = new Map.Graphic.DoubleArrow({
  position: [
    [116.60, 39.80], // 点1
    [116.70, 39.90], // 点2
    [116.65, 40.00], // 点3
    [116.75, 40.10]  // 点4
  ],
  style: { 
    color: '#ff6600', 
    width: 10 
  },
  popup: 'DoubleArrow 实体 - 需要4个点'
})
map.addGraphic(doubleArrow)`,

  swallowtailArrow: `// SwallowtailArrow 实体 - 需要2个点
const swallowtailArrow = new Map.Graphic.SwallowtailArrow({
  position: [
    [116.50, 39.70], // 起点
    [116.70, 39.80]  // 终点
  ],
  style: { 
    color: '#1e90ff', 
    width: 8 
  },
  popup: 'SwallowtailArrow 实体 - 需要2个点'
})
map.addGraphic(swallowtailArrow)`,

  gatheringPlace: `// GatheringPlace 实体 - 需要3个点
const gatheringPlace = new Map.Graphic.GatheringPlace({
  position: [
    [116.40, 39.50], // 点1
    [116.50, 39.60], // 点2
    [116.45, 39.70]  // 点3
  ],
  style: { 
    color: '#ff00ff', 
    opacity: 0.3 
  },
  popup: 'GatheringPlace 实体 - 需要3个点'
})
map.addGraphic(gatheringPlace)`
}

// 获取实体显示名称
const getEntityDisplayName = (entityType) => {
  return entityDisplayNames[entityType] || entityType
}

// 获取代码示例
const getCodeExample = (entityType) => {
  return codeExamples[entityType] || '暂无代码示例'
}

// 复制代码功能
const copyCode = async () => {
  const code = codeExamples[selectedEntity.value] || '暂无代码示例'
  try {
    await navigator.clipboard.writeText(code)
    showCopySuccess.value = true
    setTimeout(() => {
      showCopySuccess.value = false
    }, 2000)
  } catch (err) {
    console.error('复制失败:', err)
  }
}

// 控制函数
const handleEntityChange = (value) => {
  // 只显示选中的实体，隐藏其他实体
  const selectedIndex = entityMap[value]
  for (let i = 0; i < entities.length; i++) {
    entities[i].show = i === selectedIndex
  }
}

onMounted(async () => {
  map = new Map('map', {
    scene: {
      center: { lng: 116.40, lat: 39.75, alt: 1000, heading: 0 },
      zoom: 6
    },
    style: 'https://demotiles.maplibre.org/style.json',
  })

  // 1. Point - 需要1个点
  const point = new Map.Graphic.Point({
    position: entityPoints.point,
    style: { color: '#3388ff', width: 20 },
    popup: 'Point 实体 - 需要1个点',
    show: false // 初始隐藏
  })
  map.addGraphic(point)
  entities.push(point)

  // 2. Line - 需要n个点（这里用3个点）
  const line = new Map.Graphic.Line({
    position: entityPoints.line,
    style: { color: '#ff6600', width: 4 },
    popup: 'Line 实体 - 需要n个点',
    show: false // 初始隐藏
  })
  map.addGraphic(line)
  entities.push(line)

  // 3. Polygon - 需要n个点（这里用4个点）
  const polygon = new Map.Graphic.Polygon({
    position: entityPoints.polygon,
    style: { color: '#00cc88', opacity: 0.5 },
    popup: 'Polygon 实体 - 需要n个点',
    show: false // 初始隐藏
  })
  map.addGraphic(polygon)
  entities.push(polygon)

  // 4. Rectangle - 需要2个点（对角点）
  const rectangle = new Map.Graphic.Rectangle({
    position: entityPoints.rectangle,
    style: { color: '#ff8800', borderColor: '#000', borderWidth: 2 },
    popup: 'Rectangle 实体 - 需要2个点',
    show: false // 初始隐藏
  })
  map.addGraphic(rectangle)
  entities.push(rectangle)

  // 5. Label - 需要1个点
  const label = new Map.Graphic.Label({
    position: entityPoints.label,
    style: { text: 'Label', color: '#333', font_size: 18 },
    popup: 'Label 实体 - 需要1个点',
    show: false // 初始隐藏
  })
  map.addGraphic(label)
  entities.push(label)

  // 6. BillboardEntity - 需要1个点
  const billboard = new Map.Graphic.BillboardEntity({
    position: entityPoints.billboard,
    style: {
      image: await import('@/assets/images.jpg'),
      width: 48,
      height: 48,
      label: { text: 'Billboard', color: 'blue', font_size: 14, pixelOffsetY: 30 }
    },
    popup: 'BillboardEntity 实体 - 需要1个点',
    show: false // 初始隐藏
  })
  map.addGraphic(billboard)
  entities.push(billboard)

  // 7. CompositeBillboardLineLabel - 需要start和end两个点
  const composite = new Map.Graphic.CompositeBillboardLineLabel({
    start: entityPoints.composite.start,
    end: entityPoints.composite.end,
    billboard: { style: { image: await import('@/assets/images.jpg'), width: 32, height: 32 } },
    label: { style: { text: '组合', color: '#f00', font_size: 12 } },
    line: { style: { color: '#0ff', width: 2 } },
    popup: 'CompositeBillboardLineLabel 实体 - 需要start和end两个点',
    show: false // 初始隐藏
  })
  map.addGraphic(composite)
  entities.push(composite)

  // 8. StraightArrow - 需要2个点（起点和终点）
  const straightArrow = new Map.Graphic.StraightArrow({
    position: entityPoints.straightArrow,
    style: { color: '#1e90ff', width: 8 },
    popup: 'StraightArrow 实体 - 需要2个点',
    show: false // 初始隐藏
  })
  map.addGraphic(straightArrow)
  entities.push(straightArrow)

  // 9. AttackArrow - 需要n个点（这里用4个点）
  const attackArrow = new Map.Graphic.AttackArrow({
    position: entityPoints.attackArrow,
    style: { color: '#ff0000', width: 10 },
    popup: 'AttackArrow 实体 - 需要n个点',
    show: false // 初始隐藏
  })
  map.addGraphic(attackArrow)
  entities.push(attackArrow)

  // 10. DoubleArrow - 需要4个点
  const doubleArrow = new Map.Graphic.DoubleArrow({
    position: entityPoints.doubleArrow,
    style: { color: '#ff6600', width: 10 },
    popup: 'DoubleArrow 实体 - 需要4个点',
    show: false // 初始隐藏
  })
  map.addGraphic(doubleArrow)
  entities.push(doubleArrow)

  // 11. SwallowtailArrow - 需要2个点
  const swallowtailArrow = new Map.Graphic.SwallowtailArrow({
    position: entityPoints.swallowtailArrow,
    style: { color: '#1e90ff', width: 8 },
    popup: 'SwallowtailArrow 实体 - 需要2个点',
    show: false // 初始隐藏
  })
  map.addGraphic(swallowtailArrow)
  entities.push(swallowtailArrow)

  // 12. GatheringPlace - 需要3个点
  const gatheringPlace = new Map.Graphic.GatheringPlace({
    position: entityPoints.gatheringPlace,
    style: { color: '#ff00ff', opacity: 0.3 },
    popup: 'GatheringPlace 实体 - 需要3个点',
    show: false // 初始隐藏
  })
  map.addGraphic(gatheringPlace)
  entities.push(gatheringPlace)

  // 设置初始显示状态
  handleEntityChange(selectedEntity.value)
})
</script>

<style lang="scss" scoped>
.map-page {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.map-container {
  width: 100%;
  height: 100%;
}

.code-panel {
  position: absolute;
  top: 20px;
  left: 20px;
  background: rgba(255, 255, 255, 0.95);
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  width: 450px;
  height: 90vh;
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, 0.1);

  .code-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #007bff;

    h3 {
      margin: 0;
      font-size: 18px;
      color: #333;
      font-weight: 600;
    }

    .header-actions {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .entity-name {
      font-size: 14px;
      font-weight: bold;
      color: #007bff;
      background: rgba(0, 123, 255, 0.1);
      padding: 4px 8px;
      border-radius: 4px;
    }

    .copy-btn {
      background: #007bff;
      color: white;
      border: none;
      border-radius: 4px;
      padding: 6px 8px;
      cursor: pointer;
      transition: all 0.3s ease;
      font-size: 12px;

      &:hover {
        background: #0056b3;
        transform: scale(1.05);
      }

      &:active {
        transform: scale(0.95);
      }
    }

    .copy-success {
      font-size: 12px;
      color: #28a745;
      background: rgba(40, 167, 69, 0.1);
      padding: 4px 8px;
      border-radius: 4px;
      animation: fadeInOut 2s ease-in-out;
    }
  }

  .code-content {
    flex-grow: 1;
    overflow-y: auto;
    padding-right: 10px;

    pre {
      margin: 0;
      padding: 0;
      background-color: #f8f9fa;
      border-radius: 6px;
      font-size: 13px;
      line-height: 1.6;
      white-space: pre-wrap;
      word-wrap: break-word;
      border: 1px solid #e9ecef;
    }

         code {
       display: block;
       padding: 15px;
       color: #333;
       background-color: #f8f9fa;
       border-radius: 6px;
       font-family: 'Consolas', 'Monaco', 'Andale Mono', 'Ubuntu Mono', 'monospace';
       font-size: 12px;
       line-height: 1.5;
       white-space: pre;
       word-wrap: break-word;
       border: 1px solid #e9ecef;
       overflow-x: auto;
     }
  }

  /* 自定义滚动条 */
  .code-content::-webkit-scrollbar {
    width: 6px;
  }

  .code-content::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
  }

  .code-content::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
  }

  .code-content::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
  }
}

/* 淡入淡出动画 */
@keyframes fadeInOut {
  0% { opacity: 0; transform: translateY(-10px); }
  20% { opacity: 1; transform: translateY(0); }
  80% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-10px); }
}

.control-panel {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(255, 255, 255, 0.95);
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  max-height: 80vh;
  overflow-y: auto;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, 0.1);
  min-width: 250px;
  
  .el-radio-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  
  .el-radio {
    margin-right: 0;
    margin-bottom: 0;
    padding: 8px 12px;
    border-radius: 6px;
    transition: all 0.3s ease;
    
    &:hover {
      background-color: rgba(0, 123, 255, 0.1);
    }
    
    &.is-checked {
      background-color: rgba(0, 123, 255, 0.15);
      border: 1px solid rgba(0, 123, 255, 0.3);
    }
  }
}
</style>